<template>
  <div class="header">
    <div class="search-wrapper">
      <a href="./search.html"><svg viewBox="0 0 1024 1024" class="pseoQ2Yg"><path d="M1011.061 963.072L841.394 793.406a34.062 34.062 0 0 0-4.603-3.86c72.472-83.395 116.343-192.31 116.343-311.479C953.133 215.681 740.453 3 478.067 3 215.681 3 3 215.681 3 478.067c0 262.386 212.681 475.067 475.067 475.067 119.168 0 228.084-43.87 311.479-116.343a34.132 34.132 0 0 0 3.86 4.604l169.667 169.667c13.252 13.252 34.737 13.252 47.989 0 13.251-13.253 13.251-34.738-0.001-47.99z m-532.994-77.805c-224.904 0-407.2-182.296-407.2-407.2s182.296-407.2 407.2-407.2 407.2 182.296 407.2 407.2-182.296 407.2-407.2 407.2z"></path></svg>{{index || '商品搜索'}}</a>
    </div>
    <HeaderNavBar></HeaderNavBar>
  </div>
</template>

<script>
// import instance from '../../api/request.js'
import random from '../plugins/random.js'
import HeaderNavBar from './HeaderNavBar'
import axios from 'axios'
export default {
  name: 'MyHead',
  data(){
    return {
      list:[],
      index:''
    }
  },
  methods:{
    async fn_getData(){
      let {data} =await axios.get('./pdd.json')
      this.list = data.search;
      console.log(data.search)
      this.index = this.list[random(0,this.list.length)]
    }
  },
  created(){
    this.fn_getData();
  },
  components:{
    HeaderNavBar
  }
};
</script>

<style lang="less" scoped>
  .header {
    width: 7.5rem;
    position:fixed;
    top:0;
    left:0;
    z-index: 999;
    background:#fff;
    .search-wrapper {
      font-size: .32rem;
      width: 7.5rem;
      padding: 0.12rem 0.28rem 0.02rem;
      a {
        display: block;
        height: .76rem;
        border-radius: .16rem;
        color: #9c9c9c;
        background: #ededed;
        display: flex;
        justify-content: center;
        align-items: center;
        svg {
          width: .3rem;
          height: .3rem;
          margin-right: .16rem;
          fill:#9c9c9c;
        }
      }
    }
  }
</style>